<template>
	<view class="wrap bg1">
		<view class="tabs p30 bgw">
			<view @tap="tab(0)" :class="{ acts: state == 0 }">
				已使用
				<i></i>
			</view>
			<view @tap="tab(1)" :class="{ acts: state == 1 }">
				已领完
				<i></i>
			</view>
			<view @tap="tab(2)" :class="{ acts: state == 2 }">
				已过期
				<i></i>
			</view>
		</view>
		<view class="list">
			<view v-for="(v, i) in list" :key="v.couponId" class="content " :class=" sty(v.status)">
				<view class="box1">
					<p class="p1 one">
						<span class="moneyIcon">￥</span>
						<span class="money">{{ v.amount }}</span>
						{{ v.name }}
					</p>
					<p class="p2 one">实付订单金额满{{ v.withAmount }}可用</p>
					<p class="p3 one">(有效期：{{ v.validStartTime }} - {{ v.validEndTime }})</p>
				</view>
				<view @tap="GocouponDetails(v)" class="box2">
					<!-- <view v-if="v.status == 0" class="btn"> </view>
					<view v-if="v.status == 1" class="btn"> </view>
					<view v-if="v.status == 2" class="btn"> </view> -->
					领取记录>
				</view>
			</view>
		</view>
		<view class="bttoom p30"><button @tap="GocouponAdd()" class="btnbg">创建优惠券</button></view>
	</view>
</template>

<script>
	import {
		storeGetCouponList
	} from '@/api/api.js';
	export default {
		data() {
			return {
				shakeState:0,
				state: 0,
				list: [],
				page: 0,
				size: 20,
				stops: 0,
				name: ''
			};
		},
		onLoad(e) {
			this.name = e.name
		},
		onShow() {
			this.shakeState = 0
			this.init();
		},
		onReachBottom() {
			if (this.stops == 0) {
				this.listAdd();
			}
		},
		methods: {
			sty(state) { 
				if (state == 0) {
					return "content1"
				}
				if (state == 1) {
					return "content2"
				}
				if (state == 2) {
					return "content3"
				}
			},
			GocouponDetails(e) {
				uni.navigateTo({
					url: '../couponDetails/couponDetails?id=' + e.couponId
				})
			},
			tab(e) {
				this.state = e;
				this.init();
			},
			async init() {
				this.page = 0;
				let data = {
					page: this.page,
					size: this.size,
					status :this.state,
					// storeId :
				};
				let list = await storeGetCouponList(data);
				if (list.couponList.length != this.size) {
					this.stops = 1;
				} 
				this.list = list.couponList;
				this.page = this.page + 1;
			},
			async listAdd() {
				let data = {
					page: this.page,
					size: this.size
				};
				let list = await storeGetCouponList(data);
				if (list.couponList.length != this.size) {
					this.stops = 1;
				} 
				this.list = [...this.list, ...list.couponList];
				this.page = this.page + 1;
			},
			GocouponAdd() {
				if(this.shakeState == 0){
					this.shakeState = 1
					uni.navigateTo({
						url: '../couponAdd/couponAdd?name=' + this.name
					});		
				} 
			}
		}
	};
</script>

<style lang="less" scoped>
	@import './index.less';
</style>
